<template>
  <div class="sideber">
    <!-- :class="sideber[index] ? spanColor : ''"  {{item.name}} -->
    <span v-for="(item,index) in puted_sideber" :key="index" :class="item.isSideber ? 'spanColor' : ''" @click="span_click($event,index)"> {{item.name}}</span>
  </div>
</template>

<script>
export default {
  props: ['sideber', 'listTop'],
  data() {
    return {
      sidebers: []
    }
  },
  methods: {
    span_click(e, index) {
      // window.scroll 不生效
      // document.body.scroll 只能在滚动的那个div才能生效，
      document.getElementsByClassName('home')[0].scrollTop = this.listTop[index] - 60
      // console.log(document.getElementsByClassName('home')[0])
      // console.log(this.listTop[index])
    }
  },
  computed: {
    puted_sideber() {
      return this.sideber
    }
  },
  mounted() {},
  updated() {}
}
</script>

<style lang="less" scoped>
.sideber {
  padding: 10px;
  position: fixed;
  transition: 0.5s;
  // right: 50px;
  top: calc(100vh / 3);
  width: fit-content;
  height: fit-content;
  span {
    display: block;
    font-size: 17px;
    margin: 5px 0px;
    color: @html_color;
    cursor: pointer;
  }
  .spanColor::before {
    position: absolute;
    content: '';
    width: 2px;
    height: 15px;
    display: block;
    background: #13c9bbb8;
    left: -5px;
    top: 5px;
  }
  .spanColor {
    position: relative;
    color: #008c8c;
    font-weight: bold;
    text-align: left;
  }
}
</style>